// @ts-nocheck
import styles from './index.module.less';
import { IconGlobe, IconAddBorder } from '@codexteam/icons';
import { make } from '../../utils/dom';

class Iframe {
    static get toolbox() {
        return {
            title: 'Iframe',
            icon: IconGlobe
        };
    }

    static get isReadOnlySupported() {
        return true;
    }

    constructor({ data, api, config, readOnly }) {
        this.data = {
            url: data.url,
        };

        this.api = api;

        this.readOnly = readOnly;

        this.config = config || {};

        this.wrapper = undefined;
    }

    render() {
        this.wrapper = make('div', styles['cx-custom-iframe']);

        if (this.data && this.data.url) {
            const iframe = make('iframe', styles.iframe, { src: this.data.url });
            const fullBtn = make('div', styles.fullBtn, { innerHTML: IconAddBorder, title: "全屏" })
            this.wrapper.append(iframe, fullBtn);
            fullBtn.addEventListener('click', () => {
                iframe.requestFullscreen();
            }, false)
        } else {
            // 创建输入框, 按钮
            const controlBox = make('div', styles.controlBox);
            const saveBtn = make('div', styles.saveBtn, { innerText: "渲染页面" });
            const ipt = make('input', styles.ipt, { placeholder: this.config.placeholder });
            controlBox.append(ipt, saveBtn);
            this.wrapper.append(controlBox);

            // 监听编辑和保存事件
            this.api.listeners.on(saveBtn, 'click', () => {
                const curIdx = this.api.blocks.getCurrentBlockIndex();
                const curBlock = this.api.blocks.getBlockByIndex(curIdx);
                this.api.blocks.update(curBlock.id, {
                    url: ipt.value
                })
            }, false)
        }

        return this.wrapper;
    }

    save(blockContent) {
        return this.data
    }
}

export default Iframe